<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">扫码付</block>
		</cu-custom>
		<!-- Amount Section -->
		<view class="u-flex" style="
        margin: 10px;
        font-size: 20px;
        display: flex;
        justify-content: center;
      ">
			{{shop.title}}
		</view>
		<view class="input-box u-flex" @click="focusInput('money')" :class="{ active: currentInput === 'money' }">
			<text class="tips">消费金额</text>
			<view class="sign">￥</view>
			<view class="money-box">
				<text>{{ money }}</text>
			</view>
			<view class="cursor" v-if="currentInput === 'money'"></view>
		</view>

		<!-- Member ID Section (no border and label) -->
		<view class="input-box u-flex member-id-box" @click="focusInput('memberId')"
			:class="{ active: currentInput === 'memberId' }">
			<view class="input-field">
				<view v-if="!memberId && currentInput !== 'memberId'" class="member-placeholder">请输入会员号</view>
				<view class="member-input">
					{{ memberId }}
					<view v-if="currentInput === 'memberId'" class="cursor"></view>
				</view>
			</view>
		</view>

		<!-- Submit Keyboard -->
		<keyboard @confirm="submit" ref="keyboard" @input="input" :inputType="currentInput"></keyboard>

		<!-- Toast Notification -->
		<!-- <mi-toast ref="miToast"></mi-toast> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import user from "@/api/user";
	import shop from '@/api/shop';
	import keyboard from "@/components/keyboard.vue";
	export default {
		data() {
			return {
				shop: {},
				money: "",
				yiYan: {},
				memberId: "",
				currentInput: "money",
			};
		},
		onLoad() {
			// Get one-line phrase
			this.getShop()
		},
		components: {
			keyboard,
		},
		methods: {
			input(e) {
				if (this.currentInput === "money") {
					this.money = e;
				} else if (this.currentInput === "memberId") {
					this.memberId = e;
				}
			},
			getShop() {
				shop.index().then(res => {

					// uni.hideLoading();
					if (res.code === 1) {
						this.shop = res.data.shop
					}
				})
			},
			scanQRcodes() {
				
				if(!this.shop.wx_mchid){
					uni.showModal({
						title:"尚未开通支付"
					})
					this.focusInput('money')
					return
				}
				let that = this
				uni.scanCode({
					success: (res) => {
						if (res.result) {
						
							shop.scan({
									scancode: res.result,
									money: that.money,
									mobile: that.mobile,
									shopId: that.shop.id,
								})
								.then((res) => {
									console.log(res)
									// uni.hideLoading();
									if (res.code === 1) {
										uni.showModal({
											title: '支付成功',
											icon: 'none'
										});
										this.focusInput('money')
									} else {
										let out_trade_no = res.data.out_trade_no
										uni.showModal({
											title: "提示", // Title of the modal
											content: res.msg, // Message content
											showCancel: true, // Show cancel button (default: true)
											cancelText: "取消", // Custom cancel button text
											confirmText: "确定", // Custom confirm button text
											success: function(res1) {
												if (res1.confirm) {
													console.log("用户点击了确定");
													console.log(out_trade_no)
													setTimeout(() => {
														that.checkorder(out_trade_no);
													}, 2000);
												} else if (res1.cancel) {
													console.log("用户点击了取消");
												}
											}
										});




									}
								});
							console.log("扫描结果：", res.result);
						} else {
							uni.showToast({
								title: "扫描失败",
								icon: "none",
							});
						}
					},
					fail: (err) => {
						if (err.errMsg.includes("cancel")) {
							uni.showToast({
								title: "扫描已取消",
								icon: "none",
							});
						} else {
							uni.showToast({
								title: "调用相机失败",
								icon: "none",
							});
						}
					},
				});
			},
			checkorder(out_trade_no) {
				shop.pollOrderStatus({
					out_trade_no: out_trade_no,
					shopId: this.shop.id,
				}).then(res => {
					// uni.hideLoading();
					console.log(res)
					if (res.code === 1) {
						uni.showModal({
							title: '支付成功',
							icon: 'none'
						});
						this.money = '';
						this.$refs.keyboard.resetConfirmText();
					}else{
						uni.showModal({
							title: '支付失败',
							icon: 'none'
						});
					}
				})
			},
			submit() {
				if (this.money == "") {
					uni.showToast({
						title: "请先输入买单金额",
						type: "warning",
					});
					return false;
				}

				this.$refs.keyboard.showPayText();
				this.scanQRcodes();
			},
			focusInput(type) {
				this.currentInput = type;
				this.$refs.keyboard.resetConfirmText();
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.content {
		font-size: 28rpx;

		.btn {
			margin-top: 60rpx;
			padding: 0 60rpx;
		}
	}

	/* Hitokoto Box Styling */
	.hitokoto-box {
		position: fixed;
		bottom: 700rpx;
		width: 100%;
		color: #999;

		.hitokoto-content {
			padding: 0 60rpx;
			margin-top: 360rpx;
			margin-bottom: 30rpx;
		}

		.from {
			padding: 0 60rpx;
			text-align: right;

			text {
				color: #aaa;
			}
		}
	}

	/* Input Box Styling */
	.input-box {
		width: 700rpx;
		margin: 20rpx auto;
		/* Add space between input boxes */
		display: flex;
		align-items: center;
		padding: 0 40rpx 0 30rpx;
		background-color: #ffffff;
		height: 120rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
	}

	.tips {
		color: #868686;
		font-size: 32rpx;
		font-weight: bold;
	}

	.sign {
		margin-left: auto;
		font-size: 36rpx;
		font-weight: bold;
		transform: translateY(8rpx);
	}

	.money-box {
		color: #333;
		font-size: 56rpx;
		font-weight: bold;
	}

	.cursor {
		position: absolute;
		right: 50rpx;
		width: 4rpx;
		height: 58rpx;
		background-color: #768afa;
		animation: flicker 1.2s infinite;
		opacity: 1;
		transition: opacity 0.3s ease;
	}

	/* 当输入框不活跃时隐藏光标 */
	.input-box:not(.active) .cursor {
		opacity: 0;
	}

	@keyframes flicker {

		0%,
		100% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}

	/* Member ID Input Styling (borderless, no label, no background color) */
	.member-id-box {
		margin-top: 20rpx;
		/* Add space between the amount and member ID input */

		.input-field {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			/* 确保光标在输入框内正确定位 */
			.member-placeholder {
				position: absolute;
				color: #868686;
				font-size: 32rpx;
				font-weight: bold;
			}

			.member-input {
				position: relative;
				color: #333;
				font-size: 56rpx;
				font-weight: bold;

				.cursor {
					top: 50%;
					right: -5px;
					transform: translateY(-50%);
				}
			}
		}
	}
</style>